﻿
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @*<link href="~/lib/element-ui/theme-chalk/index.css" rel="stylesheet" />*@
    <link href="~/css/main.css" rel="stylesheet" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="~/vue/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.2/vue-resource.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
    <div id="app" style="height:100%;">
        <el-container>
            <el-header style="text-align: right; font-size: 12px;background-color:#545c64">
                <el-menu mode="horizontal" background-color="#545c64">
                    <el-menu-item>
                        <img src="~/Img/silvon-inc-20-240.png" style="width:50px;height:50px" />
                        <a style="font-size:30px;color:white">商城管理后台</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/community/index">商品</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a href="/Order/Index" style="font-size:20px;color:white">订单</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/User/Index">用户</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/Promotions/Index">促销</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/MvcController1/Index1">权限</a>
                    </el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-aside width="170px">
                    <el-menu default-active="2"
                             class="el-menu-vertical-demo"
                             @@open="handleOpen"
                             @@close="handleClose"
                             background-color="#545c64"
                             text-color="#fff"
                             active-text-color="#ffd04b"
                             style="height:100%;">
                        <el-menu-item index="1">
                            <i class="el-icon-setting"></i>
                            <span slot="title">用户管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main> 
                    <template>
                        @*查询*@
                        <el-form :inline="true" :model="getData" class="demo-form-inline">
                            <el-form-item label="用户名">
                                <el-input v-model="getData.userName" placeholder="用户名"></el-input>
                            </el-form-item>
                            <el-form-item label="id">
                                <el-input v-model="getData.userId" placeholder="id"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" v-on:click="onSubmit">查询</el-button>
                                <el-button type="primary" v-on:click="addUser()">添加</el-button>
                            </el-form-item>                                   
                        </el-form>
                        @*表头*@
                        <el-table :data="tableData"
                                  style="width: 100%">
                            <el-table-column type="selection"
                                             width="55">
                            </el-table-column>
                            <el-table-column label="id"
                                             prop="userId">
                            </el-table-column>
                            <el-table-column label="账号"
                                             prop="userAccount">
                            </el-table-column>
                            <el-table-column label="姓名"
                                             prop="userName">
                            </el-table-column>
                            <el-table-column label="手机号"
                                             prop="userPhone">
                            </el-table-column>  
                            <el-table-column label="生日"
                                             prop="userBirthday">
                            </el-table-column> 
                            <el-table-column label="最近购买"
                                             prop="userBuytime">
                            </el-table-column>
                            <el-table-column label="状态"
                                             prop="userState">
                            </el-table-column>
                            <el-table-column label="余额"
                                             prop="userBalance">
                            </el-table-column> 

                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" v-on:click="handleEdit(scope.$index, scope.row,scope.value)">修改</el-button>
                                    <el-button type="primary" size="mini" v-on:click="removeUser(scope.$index,scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        @*分页*@
                        <el-pagination class="mpage" :model="current" ref="current"
                                       background
                                       @@size-change="handleSizeChange" @*修改显示条数触发事件*@
                                       @@current-change="page" @*换页触发事件*@
                                       :current-page="current.currentPage"
                                       :page-sizes="[2, 4, 6]"
                                       :page-size="current.pageSize"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="current.total">
                        </el-pagination>
                    </template>

                </el-main>

                @* 弹出修改对话框 *@
                <el-dialog title="修改" :visible.sync="outTable">
                    <el-form :model="updateData">

                        <el-form-item label="账号" :label-width="formLabelWidth">
                            <el-input v-model="updateData.userAccount" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="用户名" :label-width="formLabelWidth">
                            <el-input v-model="updateData.userName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" :label-width="formLabelWidth">
                            <el-input v-model="updateData.userPhone" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" :label-width="formLabelWidth">
                            <el-input v-model="updateData.userSex" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="注册时间" :label-width="formLabelWidth">
                            <el-input v-model="updateData.createTime" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" :label-width="formLabelWidth">
                            <el-input v-model="updateData.userPwd" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="消费" :label-width="formLabelWidth">
                            <el-input v-model="updateData.userPrice" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="消费次数" :label-width="formLabelWidth">
                            <el-input v-model="updateData.userCount" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="均价" :label-width="formLabelWidth">
                            <el-input v-model="updateData.userAvg" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="生日" :label-width="formLabelWidth">
                            <el-input v-model="updateData.userBirthday" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="图片" :label-width="formLabelWidth">
                            <el-input v-model="updateData.serImg" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="最近购买" :label-width="formLabelWidth">
                            <el-input v-model="updateData.userBuytime" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="余额" :label-width="formLabelWidth">
                            <el-input v-model="updateData.userState" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" :label-width="formLabelWidth">
                            <el-input v-model="updateData.userBalance" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button v-on:click="outTable = false">取 消</el-button>
                        <el-button type="primary" v-on:click="upd">修 改</el-button>
                    </div>
                </el-dialog>

                @* 弹出添加对话框 *@
                <el-dialog title="添加" :visible.sync="add">
                    <el-form :model="addData">
                        <el-form-item label="账号" :label-width="formLabelWidth">
                            <el-input v-model="addData.userAccount" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称" :label-width="formLabelWidth">
                            <el-input v-model="addData.userName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" :label-width="formLabelWidth">
                            <el-input v-model="addData.userPhone" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" :label-width="formLabelWidth">
                            <el-input v-model="addData.userSex" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="开始时间" :label-width="formLabelWidth">
                            <el-input v-model="addData.createTime" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" :label-width="formLabelWidth">
                            <el-input v-model="addData.userPwd" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="价格" :label-width="formLabelWidth">
                            <el-input v-model="addData.userPrice" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="次数" :label-width="formLabelWidth">
                            <el-input v-model="addData.userCount" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="均价" :label-width="formLabelWidth">
                            <el-input v-model="addData.userAvg" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="生日" :label-width="formLabelWidth">
                            <el-input v-model="addData.userBirthday" autocomplete="off"></el-input>
                        </el-form-item> 
                        <el-form-item label="购买" :label-width="formLabelWidth">
                            <el-input v-model="addData.userBuytime" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="账号状态" :label-width="formLabelWidth">
                            <el-input v-model="addData.userState" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="余额" :label-width="formLabelWidth">
                            <el-input v-model="addData.userBalance" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" :label-width="formLabelWidth">
                            <el-input v-model="addData.userDelState" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button v-on:click="add = false">取 消</el-button>
                        <el-button type="primary" v-on:click="adda">添 加</el-button>
                    </div>
                </el-dialog>
            </el-container>
        </el-container>
    </div>

    <style>
        /*去掉a标签的下划线*/
        a {
            color: black;
            text-decoration: none;
        }
    </style>
</body>
</html>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                formLabelWidth: '120px',
                //分页
                current: {
                    //默认
                    currentPage: 1,//页码
                    total: 0,//总共多少条
                    pageSize: 4//每页多少条数据
                },
                getData: {
                    userId: '',
                    userName: '',
                },
                add: false,
                addData: {
                    userAccount: '',
                    userName: '',
                    userPhone: '',
                    userSex: '',
                    createTime: '',
                    userPwd: '',
                    userPrice: '',
                    userCount: '',
                    userAvg: '',
                    userBirthday: '', 
                    userBuytime: '',
                    userState: '',
                    userBalance: '',
                    userDelState: ''
                },
                outTable: false,
                updateData: {
                    userAccount: '',
                    userName: '',
                    userPhone: '',
                    userSex: '',
                    ureateTime: '',
                    userPwd: '',
                    userPrice: '',
                    userCount: '',
                    userAvg: '',
                    userBirthday: '',
                    userImg: '',
                    userBuytime: '',
                    userState: '',
                    userBalance: '',
                }
            }
        },
        created: function () {
            this.getDate();
        },
        methods: {
            //显示
            getDate() {
                var url = "http://localhost:62874/api/Users/GetUser";
                this.$http.get(url, {
                    params: {
                        name: this.getData.userName,
                        id: this.getData.userId,
                        pageIndex: this.current.currentPage,
                        pageSize: this.current.pageSize
                    }
                    //params: { UserId=tableData.userId, UserName=tableData.userName }

                }).then(function (result) {
                    console.log(this.tableData.body);
                    this.tableData = result.body.data;
                    this.current.total = result.body.total;
                });
                //axios.get(url).then(response => {
                //    alert(response);
                //    console.log(response.data);
                //    this.tableData = response.data;
                //})
                //    .catch(function (error) {
                //        console.log(error);
                //    });
            },
            //查询
            onSubmit() {
                this.getDate();
            },
            //添加弹框
            addUser() { 
                this.add = true;
            },
            //反填
            handleEdit(row, value) {
                this.updateData = row;
                this.updateData = value;
                this.outTable = true;
            },
            //修改
            upd() {
                var url = 'http://localhost:62874/api/Users/Update';
                //var data = JSON.stringify(this.updateData);r self = this;
                var data = JSON.stringify(this.updateData);
                this.$http.put(url, data, {
                    emulateJSON: true   //反序列化
                }).then((response) => {
                    //响应成功回调
                    alert(response.data);
                    if (response.data > 0) {
                        console.log(response.body);
                        this.$message.success('修改成功');
                        this.outTable = false;  //关闭表格
                        this.getDate();
                    } else {
                        console.log(response.data);
                        this.$message.error('修改失败1');
                    }
                }), (response) => {
                    //响应失败回调
                    response.$message.error('修改失败2');
                };
            },
            //添加
            adda() {
                var url = 'http://localhost:62874/api/Users/Add'; 
                //var data = JSON.stringify(this.addData);
                var data = JSON.stringify(this.addData); 
                alert(data);
                this.$http.post(url, data, { emulateJSON: true }).then(function (result) {
                    console.log(123);
                    if (result.body > 0) {
                        console.log(result.data);
                        this.$message.success('添加成功');
                        this.add = false;
                        this.getDate();
                    }
                    else {
                        this.$message.error('添加失败');
                    }
                });
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //删除
            removeUser(index, row) {
                this.$confirm('此操作将永久删除用户 ' + row.userName + ', 是否继续?', '提示', { type: 'warning' })
                    .then(() => {//向服务端发送请求
                        var id = row.userId;
                        console.log(id);
                        var url = "http://localhost:62874/api/Users/Delete?id=" + id;

                        //删除请求
                        this.$http.delete(url)
                            .then(function (result) {
                                alert(result.body);
                                if (result.body > 0) {
                                    this.$message.success('删除成功');
                                    this.getDate();   //重新加载
                                }
                                else {
                                    this.$message.error('删除失败');
                                }
                            }, function (response) {
                                console.info(response);
                            });
                    }).catch(() => {
                        this.$message.info('已取消操作!');
                    });
            },
            page(value) {
                this.current.currentPage = value;
                this.getDate();
            },
            handleSizeChange(val) {
                this.current.pageSize = val;
                this.getDate();
            }
        }
    });
</script>
